<template>
    <el-menu default-active="0" mode="horizontal" class="bar">
        <el-tooltip effect="light" content="首页" placement="bottom" show-after="1000">
            <el-button @click="routeBack">
                <home :theme="iconConf.theme" :size="iconConf.size" fill="#333" :strokeWidth="iconConf.strokeWidth" />
            </el-button>
        </el-tooltip>

        <el-tooltip effect="light" content="刷新" placement="bottom" show-after="1000">
            <el-button @click="flash">
                <refresh :theme="iconConf.theme" :size="iconConf.size" fill="#333"
                    :strokeWidth="iconConf.strokeWidth" />
            </el-button>
        </el-tooltip>



        <el-tooltip effect="light" :content="title" placement="bottom" show-after="200">
            <el-text style="flex-grow: 0.9;text-align: center;max-width: 60%;" truncated>
                {{ title }}
            </el-text>
        </el-tooltip>




        <el-tooltip effect="light" content="最小化" placement="bottom" show-after="1000">
            <el-button text @click="minimize">
                <el-icon>
                    <Minus />
                </el-icon>
            </el-button>
        </el-tooltip>


        <el-tooltip effect="light" content="关闭" placement="bottom" show-after="1000">
            <el-button text @click="close">
                <el-icon>
                    <Close />
                </el-icon>
            </el-button>
        </el-tooltip>

    </el-menu>
</template>

<script setup lang="ts">
import { Home, Refresh } from '@icon-park/vue-next';
import { useBaseStore } from '@/stores/baseStore';

const baseStore = useBaseStore();
const iconConf = baseStore.getIconConf


defineProps({
    title: {
        type: String,
        require: true,
    },
    routeBack: {
        type: Function,
        require: true,
    },
    flash: {
        type: Function,
        require: true,
    },
    minimize: {
        type: Function,
        require: false,
        default: () => {
            window.electronApi.minimize()
        }
    },
    close: {
        type: Function,
        require: false,
        default: () => {
            window.electronApi.close()
        }
    },
})



</script>

<style scoped>
.bar {
    -webkit-app-region: drag;
    padding-left: 5%;
    align-items: center;
    border-bottom: none !important;
    gap: 10px;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 5px;
    box-shadow: var(--el-box-shadow-lighter);
    z-index: 1;
    width: 100%;
}

.bar * {
    -webkit-app-region: no-drag;
}
</style>